import { useState,useContext,useReducer, createContext } from 'react'
import Header from "./components/Header";
import Home from "./components/Home";
import Login from './components/Login';
import './App.css';

export const AuthContext = createContext();
const initialState = {
  isAuthenticated:false,
  user:null,
  token:null
}
const authReducer = function(state,action) {

  switch(action.type) {
    case 'LOGIN':
     
      return {
        ...state,
        isAuthenticated:true,
        user:action.payload.user,
        token:action.payload.token
        
      }
    case 'LOGOUT':
      return {
        ...state,
        isAuthenticated:false,
        user:null,
        token:null
      }
    default :
      return state;
  }
} 



function App() {
 
  const [authState,authDispatch] = useReducer(authReducer,initialState);


  console.log('authState in App:',authState);


  return (
    <AuthContext.Provider value={{authState,authDispatch}} >
    <div className="App">
      
      <Header />
      {authState.isAuthenticated?<Home />:<Login />}
    </div>
    </AuthContext.Provider>
  )
}

export default App
